.ui-widget {
  font-family: $headings-font-family;
  font-size: $font-size-base;
  font-weight: 400;
}

#ui-datepicker-div {
  background-color: white;
  background-image: none;
  color: $gray-500;
  border-color: $input-border-color;
  width: auto;
  padding: 20px;

  &.ui-corner-all {
    border-radius: $border-radius;
  }

  .ui-datepicker-header {
    border-radius: 0;
    border: none;
    background-image: none;
    background-color: transparent;
  }

  .ui-widget-header .ui-icon {
    background-color: transparent;
    background-image: none;
    text-indent: 0;
    vertical-align: bottom !important;
    width: 14px;
    color: $primary;

    &.ui-icon-circle-triangle-w {
      @extend .glyphicon;
      @extend .glyphicon-chevron-left;
    }

    &.ui-icon-circle-triangle-e {
      @extend .glyphicon;
      @extend .glyphicon-chevron-right;
    }
  }

  .ui-state-hover {
    border: none;
    background-image: none;
    background-color: transparent;
    transition: color 0.2s ease-in-out;
    cursor: pointer;

    span.ui-icon {
      color: $success;
    }
  }

  .ui-datepicker-next-hover {
    right: 2px;
    top: 2px;
  }

  .ui-datepicker-prev-hover {
    left: 2px;
    top: 2px;
  }

  .ui-datepicker-title {
    font-weight: 500;
    color: $gray-500;
  }

  table.ui-datepicker-calendar {
    th {
      span {
        text-transform: uppercase;
        letter-spacing: 1px;
        color: $primary;
        font-weight: 500;
      }
    }

    td {
      width: 31px;
      height: 29px;
      // transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

      .ui-state-default,
      .ui-widget-content .ui-state-default,
      .ui-widget-header .ui-state-default {
        background-color: transparent;
        background-image: none;
        border: none;
        text-align: center;
        font-weight: 300;
      }

      .ui-state-highlight {
        @include button-variant($secondary, $secondary);
      }

      .ui-state-active {
        @include button-variant($success, $success);

        &:hover {
          background-color: darken($success, 7);
        }
      }

      &:hover {
        background-color: $gray-100;
      }

      &:active {
        background-color: $success;

        a {
          color: white;
        }
      }
    }
  }
}
